<template>
  <div class="role-container">
    <el-button type="primary" @click="addHandle">新增角色</el-button>
    <el-table :data="tableData" style="width: 100%" border stripe>
      <el-table-column align="center" label="序号" width="80" type="index" />
      <el-table-column label="角色" align="center" prop="name" />
      <!-- 描述的两种获取数据的方式 -->
      <el-table-column label="描述" align="center" prop="description" />
      <el-table-column label="描述" align="center">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button
            type="success"
            size="mini"
            @click="perHandle(scope.row.id)"
          >分配权限</el-button>
          <el-button
            type="primary"
            size="mini"
            @click="handleEdit(scope.row)"
          >编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      style="margin: 20px; text-align: right"
      layout="sizes,prev, pager, next,jumper,total"
      :page-sizes="[2, 4, 6, 8]"
      :current-page="queryObj.page"
      :page-size="queryObj.pagesize"
      :total="total"
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />

    <!-- 角色编辑以及添加对话框 -->
    <el-dialog title="编辑角色" :visible.sync="dialogFormVisible">
      <!-- 关闭对话框，数据清空
      v-if="dialogFormVisible" -->
      <roleDig
        v-if="dialogFormVisible"
        :dialog-form-visible.sync="dialogFormVisible"
        :is-edit="isEdit"
        :row="row"
        @success="success"
      />
    </el-dialog>

    <!-- 分配权限 -->
    <el-dialog title="提示" :visible.sync="dialogVisiblePer" width="40%">
      <!-- default-expand-all   默认展开树形结构所有节点
       check-strictly    不然1级和2级产生关联 -->
      ==={{ permIds }}
      <el-tree
        v-if="dialogVisiblePer"
        ref="tree"
        :data="tableDataPer"
        show-checkbox
        node-key="id"
        default-expand-all
        :default-checked-keys="permIds"
        check-strictly
        :props="defaultProps"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisiblePer = false">取 消</el-button>
        <el-button type="primary" @click="submitHandle">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getRoles, deleteRole } from '@/api/setting.js'
import { getPermissionList } from '@/api/permission'
import { getRoleDetail, assignPerm } from '@/api/setting'
import { toDo2 } from '@/utils/'
import roleDig from './roleDig.vue'
/*
      步骤分析：
      1-点击按钮===显示对话框
      2-抽离对话框中的表单到roleDio.vue组件中====组件是显示在对话框中的
      3-表单结构布局+校验
      4-判断表单是否需要显示数据====添加角色和编辑角色公用一个对话框
        4-1 定义isEdit:false
        4-2 点击添加 isEdit:false===添加角色
          4-2-1 发送添加角色请求
        4-3 点击编辑 isEdit:true===编辑角色
           4-3-1 获取当前点击行的数据
          4-3-2 根据isEdit判断为true渲染数据到表单中
          4-3-3 发送编辑角色请求
      5-对话框标题设置
      6-对话框关闭
        6-1 操作了添加或者编辑 需要重新获取列表数据 ===关闭对话框
        6-2 点击对话框取消按钮 ===关闭对话框
      */
export default {
  name: '',
  components: {
    roleDig
  },
  data() {
    return {
      tableData: [],
      total: 0,
      queryObj: {
        page: 1,
        pagesize: 2
      },
      dialogFormVisible: false,
      isEdit: false,
      row: {},
      /* 分配权限 */
      dialogVisiblePer: false,
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      permIds: [],
      id: ''
    }
  },
  computed: {},
  created() {
    // 调用一下getRoleList
    this.getRoleList()
    this.loadPer()
  },
  methods: {
    /* 分页 */
    handleSizeChange(val) {
      /* 设置每一页显示多少条 */
      console.log(`每页 ${val} 条`)
      this.queryObj.pagesize = val
      /* 重新获取数据 */
      this.getRoleList()
    },
    handleCurrentChange(val) {
      // 获取当前页码数
      console.log(`当前页: ${val}`)
      this.queryObj.page = val
      /* 重新获取数据 */
      this.getRoleList()
    },
    /* /分页 */

    handleDelete(id) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          // 点击确认按钮
          //   console.log(id)
          const res = await deleteRole(id)
          /* 重新获取数据 */
          this.getRoleList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          /* 点击的取消按钮 */
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    async getRoleList() {
      const res = await getRoles(this.queryObj)
      // console.log(res, 8)
      this.tableData = res.data.rows
      this.total = res.data.total
    },
    // 编辑
    handleEdit(row) {
      console.log(row)
      this.dialogFormVisible = true
      this.isEdit = true
      this.row = row
    },
    // 添加
    addHandle() {
      this.dialogFormVisible = true

      // 添加角色
      this.isEdit = false
    },
    success() {
      this.dialogFormVisible = false
      this.getRoleList()
    },

    /* 给角色分配权限 */
    async perHandle(id) {
      this.id = id
      /*
      步骤分析：
      1-点击按钮显示对话框
      2-获取所有的权限列表===并展示
      3-获取当前角色所拥有的权限====并选中
        3-1 设置角色所拥有的权限并选中  :default-checked-keys="permIds"
        3-2 父子节点互相不影响 check-strictly
        3-3 解决关闭对话框再次数据问题  v-if="dialogVisiblePer"
      4-实现复选框的选中和取消
      5-点击按钮
        5-1 封装api接口函数
        5-2 调用 ===传入需要拥有的权限
        5-3 成功后：关闭对话框
      */
      this.dialogVisiblePer = true
      /* 获取当前用户所拥有的角色 */
      const res = await getRoleDetail(id)
      // console.log(res, 7)
      this.permIds = res.data.permIds
    },
    async submitHandle() {
      /* 获取所有选中的权限id集合  this.$refs.tree.getCheckedKeys()*/
      console.log(this.$refs.tree.getCheckedKeys(), 999)
      var permIds = this.$refs.tree.getCheckedKeys()

      const res = await assignPerm({
        id: this.id,
        permIds
      })
      this.dialogVisiblePer = false
    },
    async loadPer() {
      const res = await getPermissionList()
      // console.log(res, 7);
      this.tableDataPer = toDo2(res.data)
    }
  }
}
</script>
\
<style lang="scss" scoped></style>
